<template>
  <div>
    <Echart :options="state.option" :height="400" />
  </div>
</template>
<script lang="ts" setup>
import { Echart } from '@/components/Echart'
import { ref, reactive, unref, onMounted } from "vue"
const state = reactive({
  option: {
    title: {
            text: '简历来源'
        },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      left: 'left',
      top: "center",
      orient: "vertical"
    },
    color: ["#2F6CBC", "#81D8F9", "#5A97AE", "#6EABFA", "#616AAE", "#FCBF3C"],
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (value) {
            return `${value.data.name} : ${value.data.value}%`
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 100, name: '官网' },
        ]
      }
    ]
  }
})
onMounted(() => {
})

</script>

<style lang="less" scoped></style>